<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>csdn首页整体布局</title>
		<style>
			* {
				margin: 0;
			}
			
			header {
				width: 100%;
			}
			
			header #dh1 {
				float: right;
				width: 30%;
				height: 20px;
				margin: 5px 10px;
				border: 2px solid red;
			}
			
			header #dh2 {
				float: left;
				width: 98%;
				height: 80px;
				margin: 5px 10px;
				border: 2px solid red;
			}
			
			header #dh3 {
				float: left;
				width: 98%;
				height: 80px;
				margin: 5px 10px;
				border: 2px solid red;
			}
			
			header #dh4 {
				float: left;
				width: 98%;
				height: 40px;
				margin: 5px 10px;
				border: 2px solid red;
			}
			
			header #dh5 {
				float: left;
				width: 98%;
				height: 20px;
				margin: 5px 10px;
				border: 2px solid red;
			}
			
			header:after {
				content: '';
				height: 0;
				clear: both;
			}
			
			section {
				width: 100%;
			}
			
			section #ds1 {
				float: left;
				width: 68%;
				margin: 5px 10px;
				border: 2px solid red;
			}
			
			section #ds1 #ds11 {
				float: left;
				width: 58%;
				height: 480px;
				margin: 5px 10px;
				border: 2px solid red;
			}
			section #ds1 #ds12 {
				float: left;
				width: 38%;
				height: 480px;
				margin: 5px 10px;
				border: 2px solid red;
			}
			section #ds2{
				float: right;
				width: 28%;
				height: 2000px;
				margin: 5px 50px 5px 10px;
				border: 2px solid red;
			} 
			section #ds3{
				float:left;
				width: 68%;
				height: 500px;
				margin: 5px 10px;
				border: 2px solid red;
			} 
			section #ds4{
				float:left;
				width: 23%;
				height: 1000px;
				margin: 5px 10px;
				border: 2px solid red;
			} 
			section #ds5{
				float:left;
				width: 45%;
				height: 1300px;
				margin: 5px 10px;
				border: 2px solid red;
			} 
			header:after{
				content: '';
				height: 0;
				clear: both;
			}
			footer #df1,#df2,#df3{
				float:left;
				width: 98%;
				height: 200px;
				margin: 5px 10px;
				border: 2px solid red;
			}
			
		</style>
	</head>

	<body>
		<header>
			<div id="dh1"></div>
			<div id="dh2"></div>
			<div id="dh3"></div>
			<div id="dh4"></div>
			<div id="dh5"></div>
		</header>
		<section>
			<div id="ds1">
				<div id="ds11"></div>
				<div id="ds12"></div>
			</div>
			<div id="ds2"></div>
			<div id="ds3"></div>
			<div id="ds4"></div>
			<div id="ds5"></div>
		</section>
		<footer>
			<div id="df1"></div>
			<div id="df2"></div>
			<div id="df3"></div>
		</footer>
	</body>

</html>